<template>
  <div class="project-details">
    <!-- 项目标题栏 -->
    <div class="header">
      <div class="title">
        {{info.projectName}}
        <span class="tag"> {{ $dictUtils.getDictLabel("project_status", info.projectStatus, '-') }}</span>
        <!-- <el-button type="primary" >审核</el-button> -->
      </div>
      <div class="actions">
        <!-- 始终显示的按钮 -->

        <el-tag type="info" size="large">变更</el-tag>
        <el-tag type="primary" size="large" @click="bindPay">本次付款</el-tag>
        <el-tag type="primary" size="large" @click="bindExprot">资金运营表</el-tag>

        <!-- 展开/折叠按钮组 -->
        <div class="collapse-group">

          <!-- 展开的按钮组 -->
          <transition-group name="expand-buttons" class="expanded-buttons">
            <template v-if="isExpanded">
              <el-tag v-for="button in collapsibleButtons" :key="button.name" :type="button.type" size="large" @click="handleButtonClick(button)">
                {{ button.label }}
              </el-tag>
            </template>
          </transition-group>

          <!-- 展开/折叠箭头 -->
          <el-tag size="large" class="collapse-arrow" :class="{ 'is-expanded': isExpanded }" @click="toggleExpand">
            <el-icon v-if="!isExpanded">
              <More />
            </el-icon>
            <el-icon v-else>
              <ArrowRight />
            </el-icon>
          </el-tag>
        </div>
      </div>
    </div>

    <div class="flex">
      <div class="info-btn" plain>{{info.groupInternalExternal==1?'集团内':'集团外'}}</div>
      <div class="info-btn" plain v-if="info.projectType">{{ $dictUtils.getDictLabel("project_type", info.projectType, '-') }}</div>
      <div class="info-btn" plain v-if="info.correspondent && info.correspondent.companyName"> {{info.correspondent && info.correspondent.companyName}} </div>
    </div>

    <!-- 项目信息展示 -->
    <div class="info-panel">
      <div class="info-row">
        <!-- 左侧固定项 -->
        <div class="info-item">
          <div class="label">管理部门</div>
          <div class="value"> {{info.office && info.office.name}}</div>
        </div>

        <!-- 右侧换行项 -->
        <div class="right-items">

          <div class="info-item">
            <div class="label">原合同金额</div>
            <div class="value">{{info.contractAmount||"0.00"}}<span>元</span></div>
          </div>
          <div class="info-item">
            <div class="label">修正后合同金额</div>
            <div class="value">{{info.revisedContractAmount||"0.0"}}<span>元</span></div>
          </div>
          <div class="info-item">
            <div class="label">项目核定成本</div>
            <div class="value">{{info.auditDirectCost||"0.00"}}<span>元</span></div>
          </div>
          <div class="info-item">
            <div class="label">累计计量金额</div>
            <div class="value">{{info.measureAmt||"0.00"}}<span>元</span></div>
          </div>
          <div class="info-item">
            <div class="label">累计开票金额</div>
            <div class="value">{{info.ticketAmount||"0.00"}}<span>元</span></div>
          </div>
          <div class="info-item">
            <div class="label">累计回款金额</div>
            <div class="value">{{info.paymentAmt||"0.00"}}<span>元</span></div>
          </div>
          <!-- <div class="info-item">
            <div class="label">项目资金余额</div>
            <div class="value">{{info.balance||"0.0"}}<span>元</span></div>
          </div> -->
          <div class="info-item">
            <div class="label">预测成本利润率</div>
            <div class="value">{{info.auditProfitRate||"0.00"}}<span></span></div>
          </div>

          <!-- <div class="info-item">
            <div class="label">实际成本利润率</div>
            <div class="value">{{info.actualProfitRate||"0.0"}}<span></span></div>
          </div> -->

        </div>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-tabs">
  <el-radio-group v-model="activeTab" size="large" >
      <el-radio-button  v-for="item in dataList" :key="item.id" :label="item.name" :value="item.name" >  </el-radio-button>
    </el-radio-group> 


 


      <!-- <el-tabs v-model="activeTab"> -->
        <!-- 动态生成的导航菜单 -->
        <!-- <el-tab-pane v-for="item in dataList" :key="item.id" :label="item.name" :name="item.id"> -->
          <!-- 每个标签页对应的内容，根据name判断显示不同内容 -->
           <div class="padding-top"> 
          <template v-if="activeTab=== '项目跟进'">
            <ProjectFollowList :correspondentId="info.correspondent?.id" />
          </template>

          <template v-else-if="activeTab === '招投标'">
            <div class="ep-bg-purple">
              <el-form :model="tenderingForm" ref="tenderingForm" label-width="auto" style="max-width: 600px;margin: 0 auto;">
                <el-form-item label="招投标费" :rules="[{required: true, message:'招投标费不能为空', trigger:'blur'}]">
                  <el-input v-model="tenderingForm.biddingFee" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" style="margin: 0 auto;">提交</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>

          <template v-else-if="activeTab=== '项目启动'">
            <div class="title" v-if="basisType==2">会议纪要</div>
            <ProjectMeetingList v-if="basisType==2" />
            <div class="title">合同</div>
            <ContractList />
          </template>

          <template v-else-if="activeTab=== '成本预算'">
            <!-- 添加发起审批按钮 -->
            <div class="approval-btn" @click="openMaskerInfo" v-if="!costInfo.instanceId && !(costInfo.auditContractAmt>500000&&parseFloat(costInfo.auditProfitRate)>=12)">
              <div class="btn-circle">
                <div class="btn-text">发起</div>
                <div class="btn-text">审批</div>
              </div>
            </div>
            <div class="approval-btn" @click="openHistoryDrawer" v-if="costInfo.instanceId">
              <div class="btn-circle">
                <div class="btn-text">审批</div>
                <div class="btn-text">详情</div>
              </div>
            </div>

            <div class="budget-header">
              <el-button @click="bindRouterBudget" v-if="!info.costId">成本预算表生成</el-button>
              <el-button @click="bindExamine" v-if="info.costId" type="success">发起第三方造价审核</el-button>
              <el-button v-if="info.costId" @click="bindHistory" type="primary">历史记录查看</el-button>
              <el-button @click="bindRouterBudget" v-if="info.costId" type="warning">重新发起成本预算</el-button>

            </div>

            <div class="budget-tabs" v-if="info.costId">
              <div class="tabs-content " v-if="costInfo&&costInfo.costEquipmentDTOList">
                <ProjectTabsCost ref="childRef" :projectId="projectId" :formData="{...costInfo,isPrev:true}" :isIndex="1" :isBuild="true" @tab-change="handleTabChange" />
              </div>
            </div>

            <div class="complete-container" v-if="info.costId&&!isHistory&&showCompleteContainer">
              <div class="detail-table">
                <h2 class="table-title">工程项目成本预算明细表</h2>
                <div class="project-info">
                  <span v-if="info.projectName">项目名称：{{info.projectName}}</span>
                  <span class="unit-label">(单位：元)</span>
                </div>
                <el-table :data="confirmTableData" border :span-method="objectSpanMethod">
                  <el-table-column prop="name1" label="明细" width="60"></el-table-column>
                  <el-table-column prop="name2" label="" width="80"></el-table-column>
                  <el-table-column prop="name" label=""></el-table-column>
                  <el-table-column prop="sequence" label="项次" width="80" align="center" />
                  <el-table-column prop="budgetAmount" label="金额" width="180" align="right">
                    <template #default="scope">
                      <span :class="{ 'blue-text': scope.row.isBlue }">{{ costInfo[scope.row.budgetAmount] }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="auditAmount" label="审核金额" width="180" align="right">
                    <template #default="scope">
                      <span>{{ costInfo[scope.row.auditAmount] || '0.00' }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>

            <div v-if="isHistory">
              <el-table :data="historyList" border>
                <el-table-column prop="updateTime" label="修改时间"></el-table-column>
                <el-table-column prop="updateBy.name" label="修改人"></el-table-column>
                <el-table-column fixed="right" header-align="center" align="center" width="300" label="操作">
                  <template #default="scope">
                    <el-button type="primary" text @click="bindDetails(scope.row.id)">
                      查看详情
                    </el-button>
                    <el-button type="text" @click="downloadTpl(scope.row.id)">
                      下载
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>

            </div>
            <div v-if="!info.costId">
              <el-empty />
            </div>
          </template>

          <template v-else-if="activeTab=== '采购核准'">
            <PurchaseList :officeId="info.office?.id" />
          </template>

          <template v-else-if="activeTab === '计量'">
            <ProjectMeasureList />
          </template>

          <template v-else-if="activeTab === '结算'">
            <div class="title">结算</div>
            <ProjectSettleList />
            <div class="title">审计</div>
            <ProjectAuditList />
          </template>

          <template v-else-if="activeTab=== '开票'">
            <ProjectTicketList />
          </template>

          <template v-else-if="activeTab === '回款'">
            <ProjectPaymentList />
          </template>

          <template v-else-if="activeTab === '交工'">
            <div class="title">交工证</div>
            <ProjectFinishedList />
            <div class="title">施工材料</div>
            <ProjectConstructionList />
          </template>

          <template v-else-if="activeTab === '竣工'">
            <ProjectCompletedList />
          </template>

          <template v-else-if="activeTab=== '质保金'">
            <ProjectQualityGuaranteeList />
          </template>

             
 </div>

        <!-- </el-tab-pane>
      </el-tabs> -->
    </div>

    <!-- 借款抽屉组件 -->
    <LoanDrawer ref="loanDrawer" />

    <!-- 修改抽屉组件 -->
    <el-drawer v-model="historyDrawerVisible" title="成本预算审批卡" direction="rtl" size="35%" :height="'70%'" :with-header="false">
      <div class="approval-drawer-content">
        <!-- 标题栏 -->
        <div class="drawer-header">
          <div class="left-section">
            <div class="circle-icon">收</div>
            <span
              class="title">成本预算审批卡({{historyDrawerInfo.status=='NEW'?'新创建':historyDrawerInfo.status=='RUNNING'?'审批中':historyDrawerInfo.status=='TERMINATED'?'被终止':historyDrawerInfo.status=='COMPLETED'?'完成':'取消'}})</span>
          </div>
          <el-button v-if="historyDrawerInfo.status=='RUNNING'" @click="terminateProcess">
            撤回审批
          </el-button>
          <el-button v-if="historyDrawerInfo.status!='RUNNING'&&historyDrawerInfo.status!='NEW'" @click="openMaskerInfo">
            重新发起审批
          </el-button>
        </div>

        <!-- 审批信息 -->
        <div class="approval-info">
          <div class="info-tabs">
            <div class="tab" :class="tabHistory==1?'active':''" @click='bindTabHistory(1)'>审批流信息</div>
            <div class="tab" :class="tabHistory==2?'active':''" @click='bindTabHistory(2)'>申请信息</div>
          </div>
          <div class="approval-timeline" v-if="tabHistory==2">
            <el-descriptions class="margin-top" title="" :column="1" :size="size" border>
              <template v-for="(item,index) in historyDrawerInfo.formComponentValues">
                <el-descriptions-item v-if="item.name&&item.name!='附件'">

                  <template #label>
                    <div class="cell-item" style="width:180px">
                      {{item.name}}
                    </div>
                  </template>
                  {{item.value&&item.value!=null?item.value:'-'}}

                </el-descriptions-item>
              </template>
            </el-descriptions>

          </div>
          <div class="approval-timeline" v-if="tabHistory==1">
            <el-timeline style="max-width: 600px">
              <template v-for="(item,index) in historyDrawerInfo.operationRecords">
                <el-timeline-item :timestamp="item.date" placement="top">
                  <el-card>

                    <h3>
                      {{item.operationResult=='REFUSE'?'拒绝':item.operationResult=='AGREE'?'同意':item.operationType=='START_PROCESS_INSTANCE'?'发起申请':item.operationType=='TERMINATE_PROCESS_INSTANCE'?'撤销':item.operationType=='REDIRECT_PROCESS'?'审批退回':item.operationType=='PROCESS_CC'?'抄送':item.operationType=='FINISH_PROCESS_INSTANCE'?'结束流程':item.operationType=='REDIRECT_TASK'?'转交任务':item.operationType=='EXECUTE_TASK_AGENT'?'代理人执行任务':''}}
                    </h3>
                    <div>{{item.userid}}</div>
                  </el-card>
                </el-timeline-item>
              </template>
            </el-timeline>

          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 付款计划弹窗 -->
    <el-dialog v-model="paymentDialogVisible" title="本次付款" width="70%" :before-close="handlePaymentDialogClose">
      <div class="payment-plan-dialog">
        <h3 class="payment-title">{{info.projectName}}</h3>

        <!-- 添加按钮区域 -->
        <div class="payment-actions">

          <el-button type="success" @click="bindSurePay">确认付款</el-button>
          <el-button type="warning" @click="enablePaymentEdit">修改</el-button>
          <!-- <el-button type="primary" @click="exportPaymentPlan">导出</el-button> -->
        </div>
        <div class="nameNew">采购合同付款</div>
        <el-table :data="paymentPlanData" border stripe style="width: 100%">
          <!-- <el-table-column prop="id" label="编号" /> -->
          <el-table-column prop="purchase.purchaseName" label="采购项目名称" />
          <el-table-column prop="contract.contractName" label="合同" />
          <el-table-column prop="receiptTime" label="收票时间" width="180" />
          <el-table-column prop="receiptAmount" label="收票金额" />
          <el-table-column prop="mustAmount" label="应付金额" />
          <el-table-column label="本次付款金额" width="150">
            <template #default="scope">
              <el-input-number :controls="false" v-if="paymentEditMode" v-model="scope.row.thisPlanAmount" placeholder="请输入金额"
                @input="calculateRemainingAmount(scope.row)">
              </el-input-number>
              <span v-else>{{ scope.row.thisPlanAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="剩余付款金额" width="120">
            <template #default="scope">
              <span>{{ calculateActualAmount(scope.row) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="nameNew">费用报销</div>
        <el-table :data="claimPlanData" border stripe style="width: 100%">
          <!-- <el-table-column prop="id" label="编号" /> -->
          <el-table-column prop="project.projectName" label="项目名称" />
          <el-table-column prop="claimName" label="事项/供应商" />
          <el-table-column prop="claimDate" label="时间" />
          <el-table-column prop="claimAmount" label="报销金额" />
          <el-table-column prop="remainAmount" label="应付金额" />
          <el-table-column label="本次付款金额" width="150">
            <template #default="scope">
              <el-input-number :controls="false" v-if="paymentEditMode" v-model="scope.row.thisPlanAmount" placeholder="请输入金额"
                @input="calculateRemainingAmount(scope.row)">
              </el-input-number>
              <span v-else>{{ scope.row.thisPlanAmount }}</span>
            </template>
          </el-table-column>
          <el-table-column label="剩余付款金额" width="120">
            <template #default="scope">
              <span>{{ calculateActualAmountNew(scope.row) }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加底部按钮区域 -->
        <div class="payment-footer" v-if="paymentEditMode">
          <el-button type="primary" @click="savePaymentChanges">生成资金运营表</el-button>
          <el-button @click="cancelPaymentEdit">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 成本历史记录弹窗 -->
    <el-dialog v-model="historyVisible" title="成本历史记录" width="70%" :before-close="handleHistoryDialogClose">

      <div class="complete-container">
        <div class="detail-table">
          <h2 class="table-title">工程项目成本预算明细表</h2>
          <div class="project-info">
            <span v-if="info.projectName">项目名称：{{info.projectName}}</span>
            <span class="unit-label">(单位：元)</span>
          </div>
          <el-table :data="confirmTableData" border :span-method="objectSpanMethod">
            <el-table-column prop="name1" label="明细" width="60"></el-table-column>
            <el-table-column prop="name2" label="" width="80"></el-table-column>
            <el-table-column prop="name" label=""></el-table-column>
            <el-table-column prop="sequence" label="项次" width="80" align="center" />
            <el-table-column prop="budgetAmount" label="金额" width="180" align="right">
              <template #default="scope">
                <span :class="{ 'blue-text': scope.row.isBlue }">{{ costHistoryInfo[scope.row.budgetAmount] }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="auditAmount" label="审核金额" width="180" align="right">
              <template #default="scope">
                <span>{{ costHistoryInfo[scope.row.auditAmount] || '0.00' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 工程项目成本预算审批卡对话框 -->
    <el-dialog v-model="maskerDialogVisible" title="工程项目成本预算审批卡" width="50%">
      <el-form :model="maskerForm" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="填报部门">
              <el-input v-model="maskerForm.officeName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目负责人">
              <el-input v-model="maskerForm.projectManager" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="本项目合同金额(元)">
              <el-input v-model="maskerForm.contractAmount" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="暂定金(元)">
              <el-input v-model="maskerForm.provisionalSum" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成本预算(元)">
              <el-input v-model="maskerForm.costBudget" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全经费(元)">
              <el-input v-model="maskerForm.safetyFunding" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全经费占比%">
              <el-input v-model="maskerForm.safetyFundingRatio" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术研发费(元)">
              <el-input v-model="maskerForm.researchFunding" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术研发费占比%">
              <el-input v-model="maskerForm.researchFundingRatio" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目利润(元)">
              <el-input v-model="maskerForm.projectProfit" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目利润率%">
              <el-input v-model="maskerForm.projectProfitRate" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件">
              <div class="upload-container">
                <!-- <file-upload
								v-model="maskerForm.files"
								:limit="3"
								tip="单个文件不要超过200M"
							>
								<el-button type="primary" icon="el-icon-upload"
									>上传附件</el-button
								>
							</file-upload> -->
              <el-button type="primary" @click="handleUploadDingTalk">
                  <el-icon>
                    <Upload  :limit="4"/>
                  </el-icon>
                  上传附件
                </el-button>
                <div class="el-upload__tip">支持 pdf、doc、docx、xls、xlsx、ppt、pptx、zip、jpg、png 等格式，单个文件不超过200M</div>

                <div v-if="maskerForm.fileList&&maskerForm.fileList.length > 0" class="file-list">
                  <div v-for="(file, index) in maskerForm.fileList" :key="index" class="file-item">
                    <el-icon>
                      <Document />
                    </el-icon>
                    <span class="file-name">{{ file.name }}</span>
                    <el-button type="danger" link @click="handleRemoveFile(file)">
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </el-button>
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="maskerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitMaskerForm">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed } from 'vue';
import * as dd from 'dingtalk-jsapi';
import { ElNotification, ElMessageBox } from "element-plus";
import projectMainService from '@/api/project/projectMainService'
import projectCostService from '@/api/cost/projectCostService'
import projectChildService from '@/api/child/projectChildService'

import ProjectFollowList from "../follow/ProjectFollowList"
import ProjectMeetingList from "../meeting/ProjectMeetingList"
import ContractList from "../contract/TPurchaseContractList"
import ProjectMeasureList from "../measure/ProjectMeasureList"
import ProjectTicketList from "../ticket/ProjectTicketList"
import ProjectPaymentList from "../payment/ProjectPaymentList"
import ProjectAuditList from "../audit/ProjectAuditList"
import ProjectFinishedList from '../finished/ProjectFinishedList'
import ProjectConstructionList from "../construction/ProjectConstructionList"
import ProjectCompletedList from "../completed/ProjectCompletedList"
import ProjectQualityGuaranteeList from "../quality/ProjectQualityGuaranteeList"
import ProjectSettleList from "../settle/ProjectSettleList"
import PurchaseList from "./purchase/Purchase"
import LoanDrawer from './LoanDrawer.vue'
import purchaseReceiptService from '@/api/receipt/purchaseReceiptService'
import ProjectTabsCost from "../cost/ProjectTabsCost"
export default {
  name: 'ProjectDetails',
  provide() {
    return {
      projectId: computed(() => this.projectId),
      basisType: computed(() => this.basisType),
    }
  },
  props: {
    id: {
      type: String,
      default: '',
    },
    basisType: {
      type: String,
      default: '',
    },
    cusType: {
      type: String,
      default: '',
    }
  },
  components: {
    ProjectFollowList,
    ProjectMeetingList,
    ContractList,
    ProjectMeasureList,
    ProjectTicketList,
    ProjectPaymentList,
    ProjectAuditList,
    ProjectFinishedList,
    ProjectCompletedList,
    ProjectQualityGuaranteeList,
    ProjectSettleList,
    ProjectConstructionList,
    PurchaseList,
    LoanDrawer,
    ProjectTabsCost
  },
  data() {
    return {
      activeTab: '项目启动',
      projectId: '',
      basisType: '',
      tableData: [{
        company: '忻州北高速公路管理有限公司',
        projectDesc: '机电系统养护工程项目',
        contractAmount: '2467611.94',
        estimatedProfit: '200000',
        groupType: '集团内'
      }],
      visible: false,
      isExpanded: false,
      collapsibleButtons: [
        { name: 'delete', label: '删除', type: 'info' },
        { name: 'loan', label: '借款', type: 'info', handler: 'openLoanDrawer' },
        { name: 'exit', label: '退出', type: 'primary', handler: 'returnToProjectList' }
      ],
      info: {},
      costInfo: {},
      tabHistory: 1,
      maskerDialogVisible: false,
      maskerForm: {
        contractAmount: '',

        costBudget: '',

        projectManager: '',

        projectManagerPhone: '',

        projectName: '',

        projectProfit: '',

        projectProfitRate: '',

        provisionalSum: '',

        researchFunding: '',

        researchFundingRatio: '',

        safetyFunding: '',

        safetyFundingRatio: '',

      },
      historyDrawerInfo: {},
      MultipartFile: {},
      confirmTableData: [
        { name1: '一、有效合同额（1项=2项-3项）', sequence: '1', budgetAmount: 'effectiveContractAmount', auditAmount: 'auditEffectiveContractAmount' },
        { name1: '合同总额', sequence: '2', budgetAmount: 'contractAmt', auditAmount: 'auditContractAmt' },
        { name1: '减：不可预见费', sequence: '3', budgetAmount: 'unForeseenExpenses', auditAmount: 'auditUnForeseenExpenses' },
        { name1: '二、项目直接成本（4项=7项+17项）', sequence: '4', budgetAmount: 'directCost', auditAmount: 'auditDirectCost' },
        { name2: '中标服务费', sequence: '5', budgetAmount: 'winningServiceFee', auditAmount: 'auditWinningServiceFee', rowType: 'bidding', name1: '投标阶段' },
        { name2: '标书制作费（标书文件费、公证费等）', sequence: '6', budgetAmount: 'biddingDocumentFee', auditAmount: 'auditBiddingDocumentFee', rowType: 'bidding', name1: '投标阶段' },
        { name2: '小计：（7项=5项+6项）', sequence: '7', budgetAmount: 'subtotalBid', auditAmount: 'auditSubtotalBid', rowType: 'bidding', name1: '投标阶段' },

        { name2: '附表一：设备（材料、软件）费', sequence: '8', budgetAmount: 'equipmentCost', auditAmount: 'auditEquipmentCost', rowType: 'construction', name1: '施工阶段' },
        { name2: '附表二：施工（服务）费', sequence: '9', budgetAmount: 'constructionCost', auditAmount: 'auditConstructionCost', rowType: 'construction', name1: '施工阶段' },
        { name2: '工程保险费（工程一切险、第三方责任险、意外伤害险等）', sequence: '10', budgetAmount: 'engineeringInsurance', auditAmount: 'auditEngineeringInsurance', rowType: 'construction', name1: '施工阶段' },
        { name2: '安全生产费、保通费等', sequence: '11', budgetAmount: 'safetyProductionCost', auditAmount: 'auditSafetyProductionCost', rowType: 'construction', name1: '施工阶段' },
        { name2: '科研费', sequence: '12', budgetAmount: 'researchFunding', auditAmount: 'auditResearchFunding', rowType: 'construction', name1: '施工阶段' },
        // { name2: '分公司管理费', sequence: '', budgetAmount: '', auditAmount: '', isSubPhase: true, rowType: 'management', name1: '施工阶段' },
        { name: '人员管理费：（13项=1%*国定浮调比例）', sequence: '13', budgetAmount: 'personnelManagementFee', auditAmount: 'auditPersonnelManagementFee', rowType: 'management', name1: '施工阶段', name2: '分公司管理费' },
        { name: '其他管理费（房屋租赁、车辆使用租赁费用、办公经费等）', sequence: '14', budgetAmount: 'otherManagementFee', auditAmount: 'auditOtherManagementFee', rowType: 'management', name1: '施工阶段', name2: '分公司管理费' },
        { name2: '其他（高空车、吊车等机械设备租赁）', sequence: '15', budgetAmount: 'miscellaneous', auditAmount: 'auditMiscellaneous', rowType: 'construction', name1: '施工阶段' },
        { name2: '税金', sequence: '16', budgetAmount: 'taxes', auditAmount: 'auditTaxes', rowType: 'construction', name1: '施工阶段' },

        { name2: '服务费', sequence: '17', budgetAmount: 'serviceFee', auditAmount: 'auditServiceFee', rowType: 'construction', name1: '施工阶段' },
        { name2: '小计（17项=SUM(8项:17项)-12项）', sequence: '18', budgetAmount: 'subtotalConstruction', auditAmount: 'auditSubtotalConstruction', rowType: 'construction', name1: '施工阶段' },
        { name1: '三、项目利润：18项=1项-4项', sequence: '19', budgetAmount: 'projectProfit', auditAmount: 'auditProjectProfit' },
        { name1: '四、项目利润率：（19项=18项/1项*100%）', sequence: '20', budgetAmount: 'profitRate', auditAmount: 'auditProfitRate' }
      ],
      isHistory: false,
      historyList: [],
      historyDrawerVisible: false,
      historyVisible: false,
      tenderingForm: {
        biddingFee: ''
      },
      paymentDialogVisible: false,
      paymentEditMode: false,
      paymentPlanData: [
      ],
      dataList: [],
      costHistoryInfo: {},
      tenderingFormRef: {},
      uploadInput: null,
      isBudgetTabsCollapsed: false,
      showCompleteContainer: true,
       claimPlanData: [],
       fileList: []
    }
  },
  created() {
    this.projectId = this.$route.query.id ? this.$route.query.id : this.id
    this.basisType = this.$route.query.basisType ? this.$route.query.basisType : this.basisType
    this.activeTab = this.$route.query.tab ? this.$route.query.tab : '项目启动'
    this.getInfo()
    this.refreshList()

  },
  watch: {
    '$route.query': {
      handler(newQuery) {
        this.projectId = newQuery.id
        this.basisType = newQuery.basisType
      },
      immediate: true
    }
  },
  methods: {
    getInfo() {
      projectMainService.getInfo({ id: this.projectId }).then(res => {

        this.info = res;
        this.tenderingForm.biddingFee = res.biddingFee
        if (this.info.costId) {
          this.getCostInfo()
        }

      })
    },
    getCostInfo() {
      projectCostService.queryById(this.info.costId).then(res => {
        this.costInfo = res;
      })
    },
    refreshList() {
      this.loading = true

      // 默认标签页定义
      const defaultTabs = [
        { id: 'progress', name: '项目跟进' },
        { id: 'tendering', name: '招投标' },
        { id: 'start', name: '项目启动' },
        { id: 'budget', name: '成本预算' },
        { id: 'purchase', name: '采购核准' },
        { id: 'measure', name: '计量' },
        { id: 'settle', name: '结算' },
        { id: 'invoice', name: '开票' },
        { id: 'payment', name: '回款' },
        { id: 'completion', name: '交工' },
        { id: 'finish', name: '竣工' },
        { id: 'warranty', name: '质保金' }
      ]

      projectChildService.list({
        'current': 1,
        'size': 99,
        childType: 1,
        status: 2,
        orders: [{ column: 'sort', asc: true }]
      }).then((data) => {
        // 如果API返回了数据，使用API数据
        if (data.records && data.records.length > 0) {
          this.dataList = data.records
        } else {
          // 否则使用默认标签页
          this.dataList = defaultTabs
        }
        this.loading = false
      }).catch(() => {
        // 出错时使用默认标签页
        this.dataList = defaultTabs
        this.loading = false
      })
    },
    bindRouterBudget() {
      this.$router.push({
        path: '/budget/budget',
        query: { id: this.projectId, basisType: this.basisType }
      });
    },
    bindTabHistory(type) {
      this.tabHistory = type
    },
    openLoanDrawer() {
      this.$refs.loanDrawer.open()
    },
    returnToProjectList() {
      // this.$router.push("/project/ProjectMainList")
      this.$router.go(-1)



    },
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    },
    handleButtonClick(button) {
      if (button.handler && typeof this[button.handler] === 'function') {
        this[button.handler]()
      }
    },
    bindExamine() {
      projectCostService.save({ ...this.costInfo, isSubmit: 1 }).then((data) => {

        this.$message.success('提交成功');

      }).catch((error) => {
        this.$message.error('提交失败，请重试');
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {

      // 处理投标阶段合并
      if (rowIndex <= 3 || rowIndex > 17) {
        if (columnIndex == 0) {
          return [1, 3];
        } else if (columnIndex == 1 || columnIndex == 2) {
          return [0, 0];
        }
      } else if (rowIndex > 3 && rowIndex <= 6) {
        if (columnIndex == 0 && rowIndex == 4) {
          return [3, 1];
        } else if (columnIndex == 0 && rowIndex == 5) {
          return [0, 0];
        } else if (columnIndex == 0 && rowIndex == 6) {
          return [0, 0];
        } else if (columnIndex == 1) {
          return [1, 2];
        } else if (columnIndex == 2) {
          return [0, 0];
        }
      } else if (rowIndex > 6 && rowIndex <= 18) {
        if (columnIndex == 0 && rowIndex == 7) {
          return [11, 1];
        } else if (columnIndex == 0 && rowIndex <= 18) {
          return [0, 0];
        } else if (columnIndex == 1 && rowIndex != 12 && rowIndex != 13) {
          return [1, 2];
        } else if (columnIndex == 2 && rowIndex != 12 && rowIndex != 13) {
          return [0, 0];
        } else if (columnIndex == 1 && rowIndex == 12) {
          return [2, 1];
        } else if (columnIndex == 1 && rowIndex == 13) {
          return [0, 0];
        }
      }


    },
    openHistoryDrawer() {
      projectCostService.dingDetail({ instanceId: this.costInfo.instanceId }).then(res => {
        this.historyDrawerVisible = true
        this.historyDrawerInfo = res
      })


    },
    onSubmit() {
      this.$refs['tenderingForm'][0].validate((valid) => {

        if (valid) {
          this.loading = true
          projectMainService.save({ ...this.tenderingForm, id: this.projectId }).then((data) => {
            this.visible = false
            this.$message.success(data)
            this.getInfo()
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    bindPay() {


      purchaseReceiptService.queryByProjectId(this.projectId).then(res => {
        this.paymentPlanData = res;
        this.paymentDialogVisible = true;
        this.paymentEditMode = false; // 初始状态为非编辑模式
      })


      purchaseReceiptService.getClaimList({projectId:this.projectId}).then(res => {
        this.claimPlanData = res;
        console.log( this.claimPlanData )
      })

    },
    handlePaymentDialogClose() {
      if (this.paymentEditMode) {
        this.$confirm('您有未保存的修改，确定要关闭吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.paymentDialogVisible = false;
          this.paymentEditMode = false;
        }).catch(() => { });
      } else {
        this.paymentDialogVisible = false;
      }
    },
    // 付款计划相关方法
    enablePaymentEdit() {
      this.paymentEditMode = true;
    },

    calculateActualAmount(row) {
      // 计算采集付款金额 = 应付金额 - 本次付款金额
      const mustAmount = parseFloat(row.mustAmount || 0);
      const thisPlanAmount = parseFloat(row.thisPlanAmount || 0);
      let num = (mustAmount - thisPlanAmount).toFixed(2)
      return num < 0 ? 0 : num;
    },
    calculateActualAmountNew(row) {
      // 计算采集付款金额 = 应付金额 - 本次付款金额
      const mustAmount = parseFloat(row.remainAmount || 0);
      const thisPlanAmount = parseFloat(row.thisPlanAmount || 0);
      let num = (mustAmount - thisPlanAmount).toFixed(2)
      return num < 0 ? 0 : num;
    },

    calculateRemainingAmount(row) {
      // 当本次付款金额输入框值变化时更新row.actualAmount
      row.thisPlanAmount = this.calculateActualAmount(row);
    },

    cancelPaymentEdit() {
      this.paymentEditMode = false;
      // 重新加载数据，取消修改
      this.loadPaymentPlanData();
    },

    savePaymentChanges() {
      // 这里可以添加保存逻辑，例如调用API保存数据

      purchaseReceiptService.paymentPlan(this.paymentPlanData).then(res => {
        this.$message.success('付款计划已更新');
        this.paymentEditMode = false;
      })
   purchaseReceiptService.confirmPaymentClaim(this.claimPlanData).then(res => {
         
        })
    },

    exportPaymentPlan() {
      this.$message.success('付款计划已导出');
      // 这里可以添加导出逻辑
    },

    loadPaymentPlanData() {
      // 这里可以添加从服务器加载付款计划数据的逻辑
      // 目前使用示例数据
    },

    getStatusType(status) {
      switch (status) {
        case '已完成':
          return 'success';
        case '待付款':
          return 'warning';
        case '未开始':
          return 'info';
        default:
          return '';
      }
    },
    bindHistory() {
      if (this.isHistory) {
        this.isHistory = false;
      } else {

        projectCostService.getHistoryList({ project: { id: this.projectId } }).then((res) => {
          this.isHistory = true;
          this.historyList = res.records;
        })
      }

    },
    bindDetails(id) {
      projectCostService.queryById(id).then(res => {
        this.costHistoryInfo = res;
        this.historyVisible = true;


      })

    },
    downloadTpl(id) {
      this.loading = true
      projectCostService
        .exportFinally({ id: id })
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, "成本预算表");
          this.loading = false
        })
        .catch(function (err) {
          this.loading = false
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    bindExprot() {
      this.loading = true
      projectCostService
        .exportFund({ id: this.projectId })
        .then((data) => {
          // 将二进制流文件写入excel表，以下为重要步骤
          this.$utils.downloadExcel(data, "资金运营表");
          this.loading = false
        })
        .catch(function (err) {
          this.loading = false
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    async bindSurePay() {
      
        await ElMessageBox.confirm('确认无误后可付款', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        purchaseReceiptService.confirmPayment(this.paymentPlanData).then(res => {
          this.$message.success(res);
          this.paymentDialogVisible=false;
        })
     purchaseReceiptService.confirmPaymentNew(this.claimPlanData).then(res => {
         
        })
      


    },
    openMaskerInfo() {
      // 初始化表单数据 this.costInfo 
      purchaseReceiptService.getApprovalData({ id: this.costInfo.id }).then((data) => {


        this.maskerForm = data
        this.maskerDialogVisible = true



      })


    },
    terminateProcess() {
      // 初始化表单数据 this.costInfo 
      purchaseReceiptService.terminateProcess({ instanceId: this.costInfo.instanceId }).then(res => {
        this.$message.info(res);
        this.getCostInfo()
      })


    },
    handleMaskerUploadSuccess(file) {
      // 处理上传成功后的逻辑
    },
    async submitMaskerForm() {
      // 处理提交表单后的逻辑



      // projectCostService.startApproval({file:this.MultipartFile,projectCost:this.maskerForm}).then(res=>{
      //   this.maskerDialogVisible = false;
      // })
      const response = await this.$http.post('/cost/projectCost/startApproval', this.MultipartFile, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      if (response == '上传钉钉文件失败') {
        this.$message.error(response);
      } else if (response == '发起审批失败') { this.$message.error(response); } else if (response == '审批中请先撤回') { this.$message.error(response); } else {
        this.$message.success(response);
      }
      this.maskerDialogVisible = false;
      this.getCostInfo()
    },
    handleUploadDingTalk() {
      // 创建或重用input元素
      if (!this.uploadInput) {
        this.uploadInput = document.createElement('input');
        this.uploadInput.type = 'file';
        this.uploadInput.multiple = true; // 允许多文件选择
        this.uploadInput.accept = '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.jpg,.jpeg,.png';
        this.uploadInput.style.display = 'none';
        document.body.appendChild(this.uploadInput);

        // 监听文件选择
        this.uploadInput.addEventListener('change', async (event) => {
          const files = event.target.files;
          if (!this.maskerForm.fileList) {
            this.maskerForm.fileList = [];
          }
          
          // 检查文件总数是否超过限制
          if (this.fileList.length + files.length > 4) {
            this.$message.error('最多只能上传4个文件');
            this.uploadInput.value = '';
            return;
          }
          
          // 创建新的FormData
          const formData = new FormData();
          
          if (files.length > 0) {
            try {
              // 添加新选择的文件
              for (let file of files) {
                // 检查文件大小（200M限制）
                if (file.size > 200 * 1024 * 1024) {
                  this.$message.error(`文件 ${file.name} 超过200M限制`);
                  continue;
                }
                
                // 保存文件到数组
                this.fileList.push(file);
                this.maskerForm.fileList.push({ name: file.name });
              }
              
              // 将所有文件添加到FormData
              this.fileList.forEach(file => {
                formData.append('files', file);
              });
              
              // 添加项目成本信息
              formData.append('projectCost', JSON.stringify(this.costInfo));
              
              // 保存FormData
              this.MultipartFile = formData;
              
            } finally {
              // 清空input，允许重复选择相同文件
              this.uploadInput.value = '';
            }
          }
        });
      }

      // 触发文件选择
      this.uploadInput.click();
    },
    // 删除文件
    handleRemoveFile(file) {
      // 从文件列表中移除
      const index = this.maskerForm.fileList.findIndex(item => item.name === file.name);
      if (index > -1) {
        this.maskerForm.fileList.splice(index, 1);
        this.fileList.splice(index, 1);
        
        // 重新创建FormData
        const formData = new FormData();
        this.fileList.forEach(file => {
          formData.append('files', file);
        });
        formData.append('projectCost', JSON.stringify(this.costInfo));
        this.MultipartFile = formData;
      }
    },
    toggleBudgetTabs() {
      this.isBudgetTabsCollapsed = !this.isBudgetTabsCollapsed;
    },
    handleTabChange(tab) {
      this.showCompleteContainer = tab == '成本预算表'?true:false;
    },
  }
}
</script>

<style scoped lang="scss">
.project-details {
  padding: 16px;
  background: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      border-bottom: none;

      .tag {
        background: rgba(93, 122, 171, 0.25);
        color: #5d7aab;
        padding: 4px 8px;
        font-size: 12px;
        margin-left: 8px;
        border: 1px solid #5d7aab;
      }
    }
  }

  .info-panel {
    background: #f2f3f5;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    margin-top: 16px;

    .info-row {
      display: flex;
      position: relative;
      gap: 32px;

      .info-item {
        position: relative;

        &:first-child {
          flex: 0.16;
          align-self: center;
          .value {
            color: #074eca;
            font-weight: 0;
          }

          &::after {
            content: "";
            position: absolute;
            right: -16px;
            top: 50%;
            transform: translateY(-50%);
            height: 100%;
            width: 1px;
            background-color: #dcdfe6;
          }
        }

        &:not(:first-child) {
          flex: 1.5;
        }

        .label {
          color: #5d7aab;
          font-size: 14px;
          margin-bottom: 8px;
        }

        .value {
          font-size: 18px;
          color: #333;
          font-weight: 700;

          span {
            font-size: 12px;
            margin-left: 2px;
          }
        }
      }

      .right-items {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        padding: 8px 0;

        .info-item {
          flex: 0 0 calc(14% - 12px);
          padding-right: 16px;
          margin: 4px 0;
          &:first-child {
            .value {
              color: #333;
            }
            &::after {
              top: 50%;
            }
          }

          &::after {
            content: "";
            position: absolute;
            right: 0;
            top: 10%;
            height: 80%;
            width: 1px;
            background-color: #dcdfe6;
          }

          &:nth-last-child(-n + 4) {
            margin-bottom: 0;
          }

          &:nth-child(-n + 4) {
            margin-top: 0;
          }

          // &:nth-child(4n) {
          //   &::after {
          //     display: none;
          //   }
          // }
        }
      }
    }
  }

  .nav-tabs {
    background: #fff;
    padding: 0 16px;
  }

  .add-section {
    margin: 16px 0;
  }

  .main-table {
    background: #fff;
  }

  .blue-link {
    color: #409eff;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }
}
.title {
  font-size: 13px;
  border-bottom: 1px solid #f2f3f5;
  color: #666;
}
.flex {
  display: flex;
}
.info-btn {
  line-height: 28px;
  font-size: 14px;
  background: #f2f3f5;
  padding: 0 20px;
  margin-right: 10px;
}
.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .el-tag {
    cursor: pointer;
    margin-right: 8px;
    margin-bottom: 10px;

    &:hover {
      opacity: 0.8;
    }
  }

  .collapse-group {
    display: flex;
    align-items: center;

    .expanded-buttons {
      display: flex;
      align-items: center;
    }
  }
}

.complete-container {
  padding: 0 20px;
  max-width: 1200px;
  margin: 20px auto;

  .detail-table {
    background: #f2f4f5;
    padding: 30px;
    border-radius: 4px;

    .table-title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .project-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      padding: 0 10px;

      .unit-label {
        color: #909399;
      }
    }

    :deep(.el-table) {
      --el-table-border-color: white;
      --el-table-border: 1px solid white;

      border: 1px solid white;

      th,
      td {
        border-bottom: 1px solid white;
        border-right: 1px solid white;
      }

      th {
        color: #606266;
        font-weight: normal;
      }

      td {
        background-color: #f2f4f5;
      }

      .el-table__fixed-right::before,
      .el-table__fixed::before,
      .el-table::before {
        background-color: white;
      }

      tr:nth-child(n + 5):nth-child(-n + 7) {
        td:first-child {
          white-space: nowrap;
          padding: 5px;
        }
      }

      tr:nth-child(n + 8):nth-child(-n + 17) {
        td:first-child {
          white-space: nowrap;
          padding: 5px;
        }
      }

      .blue-text {
        color: #409eff;
      }
    }
  }
}

// 展开/折叠动画
.expand-buttons-enter-active,
.expand-buttons-leave-active {
  transition: all 0.3s ease;
  max-width: 1000px;
  opacity: 1;
}

.expand-buttons-enter-from,
.expand-buttons-leave-to {
  max-width: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.expand-buttons-move {
  transition: transform 0.3s ease;
}

// 确保折叠时不显示内容
.expanded-buttons {
  overflow: hidden;
}

.approval-drawer-content {
  height: 100%;
  background: #f5f7fa;

  .drawer-header {
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-section {
      display: flex;
      align-items: center;
      gap: 12px;

      .circle-icon {
        width: 32px;
        height: 32px;
        background: #024dcc;
        border-radius: 50%;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #303133;
      }
    }
  }

  .approval-info {
    .info-tabs {
      display: flex;
      background: #fff;
      padding: 0 20px;
      border-bottom: 1px solid #e4e7ed;

      .tab {
        padding: 12px 16px;
        font-size: 14px;
        color: #606266;
        cursor: pointer;
        position: relative;

        &.active {
          color: #024dcc;
          font-weight: 500;

          &::after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #024dcc;
          }
        }
      }
    }

    .approval-timeline {
      padding: 20px;
      background: #fff;
      .timeline-item {
        position: relative;
        padding-left: 20px;
        margin-bottom: 24px;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 8px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #909399;
        }

        &.approved::before {
          background: #67c23a;
        }

        &.rejected::before {
          background: #f56c6c;
        }

        &.pending::before {
          background: #909399;
        }

        .time {
          font-size: 12px;
          color: #909399;
          margin-bottom: 4px;
        }

        .content {
          padding: 12px;
          border-radius: 4px;

          .action {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;
          }

          .person {
            font-size: 13px;
            color: #606266;
          }

          .remark {
            margin-top: 8px;
            font-size: 12px;
            color: #f56c6c;
            background: #fef0f0;
            padding: 8px;
            border-radius: 4px;
          }
        }
      }
    }
  }
}

.budget-header {
  margin-bottom: 20px;

  .el-button {
    margin-right: 12px;
  }
}

.approval-btn {
  position: fixed;
  top: 35%;
  right: 0;
  z-index: 1000;

  .btn-circle {
    width: 70px;
    height: 70px;
    background: #024dcc;
    box-shadow: -4px 2px 10px 0px rgba(25, 42, 76, 0.5098);
    border-radius: 35px 0px 0px 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .btn-text {
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
  }
}

.payment-plan-dialog {
  .payment-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 18px;
    color: #303133;
  }

  .payment-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;

    .el-button {
      margin-left: 10px;
    }
  }

  .payment-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;

    .el-button {
      margin: 0 10px;
    }
  }

  :deep(.el-table) {
    margin-bottom: 20px;

    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 500;
    }

    .el-tag {
      border-radius: 4px;
    }

    .el-input {
      width: 120px;
    }

    .el-input__inner {
      text-align: right;
    }
  }
}

.ep-bg-purple {
  background: #fafafa;
  padding: 40px;
}

.upload-container {
  .el-upload__tip {
    color: #909399;
    font-size: 12px;
    margin-top: 8px;
  }

  .file-list {
    margin-top: 16px;

    .file-item {
      display: flex;
      align-items: center;
      padding: 8px;
      border-radius: 4px;
      margin-bottom: 8px;
      background-color: #f5f7fa;

      .el-icon {
        margin-right: 8px;
        font-size: 16px;
        color: #909399;
      }

      .file-name {
        flex: 1;
        font-size: 14px;
        color: #606266;
        margin-right: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.budget-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.collapse-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #5470c6;
  border: 1px solid #dcdfe6;
  border-radius: 50%;
  text-align: center;
  margin-top: 10px;

  // display: flex;
  // align-items: center;
  // justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.collapse-btn:hover {
  background: #f5f7fa;
}

.collapse-btn .el-icon {
  padding-top: 5px;
  font-size: 16px;
  color: #909399;
}

.budget-tabs .tabs-content {
  width: 100%;
  transition: all 0.3s ease;
  overflow: hidden;
}

.budget-tabs .tabs-content.collapsed {
  height: 0;
  opacity: 0;
  visibility: hidden;
}
.nameNew{
  font-size: 18px;
  margin-bottom:10px ;
}
.padding-top{
  padding-top: 20px;
}
</style>